<template>
  <a-config-provider prefix-cls="ss">
    <div class="smart-clip">
      <!-- <RouteTitle :isBack="true" /> -->

      <div style="display: flex; height: 32px; line-height: 32px">
        <RouteTitle :isBack="true" />
      </div>

      <div class="smart-clip-content">
        <div class="search-area">
          <div class="n-grid">
            <div class="n-grid-item">
              <div class="n-input-group">
                <a-button style="width: 130px">ID</a-button>
                <a-input v-model:value="videoId" placeholder="请输入ID" allowClear style="width: calc(100% - 130px)" />
                <!-- {{ videoId }} -->
                <!-- {{ pageData.status_select }} -->
              </div>
            </div>
            <div class="n-grid-item">
              <div class="n-input-group">
                <a-button style="width: 130px">拆分方式</a-button>
                <a-select allowClear placeholder="请选择拆分方式" v-model:value="split_type" style="width: calc(100% - 130px)">
                  <a-select-option v-for="(value, key) in pageData.split_type_select" :key="key" :value="key">{{ value
                    }}</a-select-option>
                </a-select>
              </div>
            </div>
            <div class="n-grid-item">
              <div class="n-input-group">
                <a-button style="width: 130px">拆分状态</a-button>
                <a-select allowClear placeholder="请选择拆分方式" v-model:value="status" style="width: calc(100% - 130px)">
                  <a-select-option v-for="(value, key) in pageData.status_select" :key="value" :value="key">{{ value
                    }}</a-select-option>
                </a-select>
              </div>
            </div>
            <div class="n-grid-item" v-if="isExpend">
              <div class="n-input-group">
                <a-button style="width: 130px">拆分时间</a-button>
                <a-range-picker style="width: calc(100% - 130px); border-radius: 0 5px 5px 0" :format="'YYYY-MM-DD'"
                  v-model:value="splitTime" />
              </div>
            </div>
            <div class="n-grid-item last-gird-item">
              <div class="n-input-group grid-btn">
                <a-button type="primary" style="border-radius: 5px" @click="getList">
                  <SearchOutlined />查询
                </a-button>
                <a-button style="margin-left: 10px; border-radius: 5px" @click="resetGetList">
                  <ReloadOutlined />重置
                </a-button>
                <a-button type="link" @click="expendGird">
                  <DownOutlined v-if="!isExpend" />
                  <UpOutlined v-else />
                  <span>{{ isExpend ? "收起" : "展开" }}</span>
                </a-button>
              </div>
            </div>
          </div>
        </div>
        <div class="table-content">
          <div class="mb-10 flex justify-end">
            <a-button type="primary" @click="goToAdd">创建拆分</a-button>
          </div>

          <a-table :loading="loading" :columns="columns"   :scroll="{ x: 1500 }" :row-key="(record) => record.id" @change="tableChange"
            v-model:pagination="pagination" :data-source="list">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'material_url'">
                <!-- 网路视频 并且还没完成 -->
                <template v-if="record.material_source == 'internet' && (record.status != 2 && record.status != 0)">
                  <div style="position: relative; height: 180px; width: 100px; overflow: hidden;">
                    <img :src="utils.staticPath + 'images/workAi/shotstack/loding_bg.png'" alt=""
                      style="object-fit: cover; width: 100%;">
                    <!-- <img src="./loding_bg.png" alt="" style="object-fit: cover; width: 100%;"> -->
                    <div
                      style="position: absolute; left: 50%; top: 60%; width: 70%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center;">
                      <span v-show="record.status == 0" style="font-size: 12px; color: #6f6d6d;">
                        待处理
                      </span>
                      <span v-show="record.status == 1" style="font-size: 12px; color: #6f6d6d;">
                        拆分中
                      </span>
                      <span v-show="record.status == 2" style="font-size: 12px; color: #6f6d6d;">
                        已完成
                      </span>
                      <span v-show="record.status == 3" style="font-size: 12px; color: #6f6d6d;">
                        拆分失败
                      </span>
                      <span v-show="record.status == 4" style="font-size: 12px; color: #6f6d6d;">拆分保存中</span>
                      <!-- <span style="font-size: 12px; color: #6f6d6d;">拆分中...</span> -->
                      <a-progress :percent="100" :showInfo="false" type="line" size="small" :stroke-color="{
                        '0%': '#108ee9',
                        '100%': '#87d068',
                      }" status="active" />
                    </div>
                  </div>
                </template>
          
                <template v-else>
                  <div class="video_con">
                    <div v-if="record.thumb_url">
                      <img style="width: 100px; height: 180px; object-fit: contain;" :src="record.thumb_url" />
                    </div>
                    <div v-else>
                      <video :src="record.material_url"></video>
                    </div>
                    <div class="operate_con">
                      <cu-icon @click="toViewVideo(record)" type="icon-24gl-playCircle" class="icon" />
                    </div>
                  </div>
                </template>

              </template>
              <template v-if="column.dataIndex === 'id'">
                <span style="font-size: 16px">{{ record.id }}</span>
              </template>
              <template v-if="column.dataIndex === 'status'">
                <template v-if="record.status === 0">
                 <a-tooltip>
                  <template #title>
                    <span>
                      请继续点击右边的编辑按钮进行处理
                    </span>
                  </template>
                  <a-tag :bordered="false" color="#fdecd6" style="color: #f0a020">
                    <div class="flex" style="align-items: center;">
                      <span class="mr-5">待处理</span>
                      <question-circle-outlined style="margin-bottom: 2px;" />
                    </div>
                  </a-tag>
                
                 </a-tooltip>
                </template>
                <template v-if="record.status === 1">
                  <a-tag :bordered="false" color="#ffe7e4" style="color: #2878ff">拆分中</a-tag>
                </template>
                <template v-if="record.status === 2">
                  <a-tag :bordered="false" color="#e3eee3" style="color: #18a058">已完成</a-tag>
                </template>
                <template v-if="record.status === 3">
                  <a-tag :bordered="false" color="#fae5e5" style="color: #d03050">拆分失败</a-tag>
                </template>
                <template v-if="record.status === 4">
                  <a-tag :bordered="false" color="#eeeeee" style="color: #232527">拆分保存中</a-tag>
                </template>
              </template>
              <template v-if="column.dataIndex === 'folder'">
                <!-- 测试  状态  待处理   后期完成 后改成 已完成123 -->
                <div class="folder-btn cursor-pointer" v-if="!!record.folder && record.status !== 3"
                  @click="goToFolder(record.folder)">
                  {{ record.folder.folder_name }}
                </div>
                <div v-else style="display: flex; align-items: center">--</div>
              </template>

              <template v-if="column.dataIndex === 'Records'">
                <a-tooltip placement="top">
                  <template #title>
                    <span id="url" @click="copyDomText('url')">{{
                      record.split_source
                    }}</span>
                  </template>
                  <span class="text-records">
                    {{
                      record.split_source &&
                      record.split_source.slice(0, 50) + "..."
                    }}
                  </span>
                </a-tooltip>
              </template>
              <template v-if="column.dataIndex === 'operate'">
                <a-button type="link" @click="goToEdit(record.id)"
                  v-if="isSHowBtn(record).includes('edit')">编辑</a-button>
                <a-button danger type="text" @click="dialog.showModal(record.id)"
                  v-if="isSHowBtn(record).includes('del')">删除</a-button>
                  <MoreButton :data="record" v-if="isSHowBtn(record).includes('edit')"></MoreButton>
              </template>
            </template>
          </a-table>
        </div>
      </div>
      <AddClipping :visible="addClipVisible" @onCancel="closeAddClipping"></AddClipping>
      <!-- 预览弹框 -->
      <PreviewModal :visible="visible" :title="modalTitle" :url="videoUrl" :type="'video'"
        @onCancel="visible = false" />

      <baseModel ref="dialog" @submit="onDelete" @cancel="dialog && dialog.closeModal()">
        <!-- <template #title>
                提示
            </template> -->
      </baseModel>
    </div>
  </a-config-provider>
</template>

<script>
import { reactive, toRefs, ref, onMounted, computed } from "vue";
// 工具引入
import utils from "@/common/utils/utils.js";
import {
  ReloadOutlined,
  SearchOutlined,
  DownOutlined,
  UpOutlined,
  QuestionCircleOutlined,
} from "@ant-design/icons-vue";
import AddClipping from "./modules/AddClipping.vue";
// 视频预览
import PreviewModal from "@/components/PreviewModal/index.vue";
// 确认弹窗
import baseModel from "@/components/baseModel/baseModel.vue";

// 处理日期格式
import moment from "moment";

import { useRoute, useRouter } from "vue-router";

// 导入通用工具
import request from "@/common/utils/request";
import { message } from "ant-design-vue";
import MoreButton from "@/views/shotstack/CreationCenter/components/routeToButton.vue";

export default {
  name: "LearningCenter",
  components: {
    ReloadOutlined,
    SearchOutlined,
    DownOutlined,
    UpOutlined,
    AddClipping,
    PreviewModal,
    baseModel,
    MoreButton,
    QuestionCircleOutlined,
  },
  setup() {
    const dialog = ref(null);

    const state = reactive({
      // 预览弹窗开关
      visible: false,
      // 预览弹窗标题
      modalTitle: "",
      // 预览视频url
      videoUrl: "",
      videoId: "",
      addClipVisible: false,
      list: [],
      // 是否展开
      isExpend: false,
      // 拆分方式
      split_type: null,
      // 加载中
      loading: false,
      // 状态列表
      status: null,
      pageData: {},
      // 总条数
      count: 0,
      pageSize: 15,
      page: 1,
      splitTime: [],
      activeKey: 1,
      recordTab: "znjj",
      tabList: [
        {
          title: "昨日",
          key: 1,
        },
        {
          title: "7天",
          key: 2,
        },
        {
          title: "30天",
          key: 3,
        },
      ],
      columns: [
        { title: "素材", dataIndex: "material_url", key: "id", width: 100 },
        { title: "ID", dataIndex: "id", key: "id", width: 80 },
        {
          title: "拆分方式",
          dataIndex: "split_type_text",
          key: "id",
          width: 100,
        },
        { title: "状态", dataIndex: "status", key: "id", width: 80 },
        { title: "拆分时间", dataIndex: "updated_at", key: "id", width: 100 },
        { title: "保存到文件夹", dataIndex: "folder", key: "id", width: 100 },
        { title: "素材来源", dataIndex: "Records", key: "id", width: 80 },
        { title: "操作", dataIndex: "operate", key: "id", width: 180, fixed: "right", },
      ],
    });

    // 列表分页
    const pagination = computed(() => {
      return {
        showQuickJumper: true,
        showSizeChanger: true,
        total: state.count,
        showTotal: (total) => `共 ${total} 条, 当前页${state.list.length}条`,
        pageSize: state.pageSize,
        current: state.page,
      };
    });

    const tableChange = (pager, filters, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getList();
    };
    const router = useRouter();
    // 去添加
    const goToAdd = () => {
      router.push({
        name: "AddVideoIntelligentSplit",
      });
    };
    const tabChange = (key) => {
      state.activeKey = key;
    };
    const expendGird = () => {
      state.isExpend = !state.isExpend;
    };
    const closeAddClipping = () => {
      state.addClipVisible = false;
    };
    // 处理时间
    const gettime = computed(() => {
      if (state.splitTime.length) {
        // const time = new Date(state.splitTime[0]).getTime().toString()
        // const timeEnd = new Date(state.splitTime[1]).getTime().toString()
        return state.splitTime.map((date) => moment(date).format("YYYY-MM-DD"));
      } else {
        return [];
      }
    });
    // 获取列表
    const getList = async () => {
      state.loading = true;
      const res = await request.get(
        "/work_ai",
        "/user/shotstack/video/video_to_clips/list",
        {
          split_type: state.split_type, // scene,audio,interval,默认传空或者不传
          status: state.status, // 切片状态
          id: state.videoId, // 按id查询
          page: state.page, // 页码
          page_size: state.pageSize, // 默认15条一页
          split_time_start: gettime.value.length ? gettime.value[0] : "", // 拆分时间开始
          split_time_end: gettime.value.length ? gettime.value[1] : "", // 拆分时间结束
        }
      );
      state.list = res.result.data;

      state.count = res.result.total;
      state.loading = false;
      console.log(state.list, "list");
    };
    // 重置列表
    const resetGetList = () => {
      state.page = 1;
      state.pageSize = 15;
      state.videoId = "";
      state.status = null;
      state.splitTime = [];
      state.split_type = null;
      getList();
    };
    // 判断按钮是否能显示
    const isSHowBtn = (data) => {
      // console.log(data,'判断按钮');
      // 0待处理
      if (data.status == 0) {
        return ["del", "edit"];
      } else if (data.status == 1) {
        return [];
        // 2已完成
      } else if (data.status == 2) {
        return ["del"];
        // 3拆分失败
      } else if (data.status == 3) {
        return ["del"];
        // 4拆分中
      } else if (data.status == 4) {
        return [];
      } else {
        return [];
      }
    };

    // 获取渲染数据
    const getShowStates = async () => {
      const res = await request.get(
        "/work_ai",
        "/user/shotstack/video/video_to_clips/select"
      );
      state.pageData = res.result;
      console.log(state.pageData, "获取页面参数");
    };

    onMounted(() => {
      getList();
      getShowStates();
    });

    //  查看视频
    const toViewVideo = (result) => {
      state.visible = true;
      state.videoUrl = result.material_url;
      state.modalTitle = "name";
      console.log(result, "查看视频结果");
    };

    // 删除视频
    const onDelete = async (id) => {
      const res = await request.del(
        "/work_ai",
        "/user/shotstack/video/video_to_clips/delete",
        {
          id: id.toString(),
        }
      );
      console.log(res, "删除结果");
      if (Array.isArray(res)) {
        getList();
        dialog.value.closeModal();
      }
    };

    // 去编辑
    const goToEdit = (id) => {
      // 跳转视频拆分页面
      router.push({
        name: "VideoSplit",
        query: {
          id,
        },
      });
    };

    // 去文件夹
    const goToFolder = (parmas) => {
      const querydata = JSON.stringify(parmas);
      router.push({
        name: "MaterialList",
        query: {
          querydata: querydata,
        },
      });
    };
    const goback = () => {
      router.push({
        name: "AddVideoIntelligentSplit",
      });
    };
    const copyDomText = (id) => {
      const node = document.getElementById(id);
      if (node) {
        let createRange = document.createRange();
        createRange.selectNodeContents(document.getElementById(id));
        const selection = document.getSelection();
        selection.removeAllRanges();
        selection.addRange(createRange);
        document.execCommand("Copy");
        selection.removeAllRanges();
        message.success("已复制");
      }
    };
    return {
      dialog,
      goback,
      ...toRefs(state),
      utils,
      goToFolder,
      copyDomText,
      tabChange,
      expendGird,
      closeAddClipping,
      goToAdd,
      getList,
      toViewVideo,
      onDelete,
      goToEdit,
      tableChange,
      resetGetList,
      isSHowBtn,
      pagination,
    };
  },
};
</script>

<style lang="less" scoped>
::v-deep(.ss-tag) {
  // height: 30px;
  // width: 60px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
}

::v-deep(.ss-table-cell) {
  font-size: 15px;
}

.video_con {
  width: 100px;
  height: 180px;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  .operate_con {
    display: none;
  }

  &:hover {
    .operate_con {
      width: 100px;
      height: 180px;
      position: absolute;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;

      .play_icon {
        color: #fff;
        font-size: 24px;
        cursor: pointer;

        &:hover {
          color: #ff5652;
        }
      }

      .icon {
        color: #fff;
        font-size: 34px;
        cursor: pointer;

        &:hover {
          color: #ff5652;
        }
      }
    }
  }

  video {
    max-width: 100%;
    max-height: 100%;
  }
}

.smart-clip {
  padding: 14px 14px 0;
}

.smart-clip-header {
  display: flex;
  height: 220px;
  margin: 20px 0;
}

.smart-clip-header-title {
  font-size: 24px;
}

.smart-clip-header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  width: 700px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.smart-clip-header-right {
  width: calc(100% - 700px);
  margin-left: 20px;
}

.segment {
  width: 260px;
  display: flex;
  padding: 5px;
  background-color: #ff916514;
}

.segment-item {
  --n-tab-border-radius: 6px;
  overflow: hidden;
  border-radius: var(--n-tab-border-radius);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ac7e7d;
}

.active-tab {
  box-shadow: 4px 4px 10px #2878ff33;
  background-color: #fff;
  color: #2878ff;
}

.data-item {
  padding: 16px 15px;
  border-radius: 16px;
  background: #ffffff;
  min-width: 150px;
  min-height: 128px;
  flex-shrink: 0;
}

.data-value {
  font-family: DIN Alternate Bold;
  font-size: 26px;
  font-weight: 700;
  margin-top: 10px;
}

.menu-list {
  display: flex;
}

.menu-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.05);
  min-width: 180px;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  height: 220px;
  transition: all 0.3s;
}

.menu-item-icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
}

.menu-item-img {
  width: 110px;
}

.menu-item-title {
  font-size: 18px;
}

.ml-16 {
  margin-left: 16px;
}

.custom:before,
.ai-build:before {
  background: linear-gradient(46deg,
      #fcfcfc 0%,
      #e8e5fa 44%,
      #e8e5fa 56%,
      #e8e5fa 68%,
      #f6f6f6 100%);
  opacity: 0;
}

.fast:before {
  background: linear-gradient(46deg, #fcfcfc 0%, #dff5fa 56%, #fcfcfc 100%);
  opacity: 0;
}

.script:before {
  background: linear-gradient(46deg, #fcfcfc 0%, #deebff 56%, #f6f6f6 100%);
}

.menu-item:hover:before {
  opacity: 1;
}

.image_text:before {
  background: linear-gradient(46deg,
      #f4d0d1 0%,
      #f7efea 44%,
      #f7f0ea 56%,
      #f7efe9 68%,
      #f8e1df 100%);
  opacity: 0;
}

.menu-item:hover .menu-item-img,
.menu-item:hover .menu-item-title {
  transform: translateY(-5px) scale(1.05);
}

.menu-item .menu-item-img {
  width: 110px;
  transition: all 0.3s;
}

.menu-item:before {
  content: "";
  opacity: 0;
  position: absolute;
  inset: 0;
  transition: opacity 0.5s;
}

.content-title {
  font-size: 24px;
}

.n-grid {
  display: flex;
}

.search-area {
  // min-width: 1200px;
  margin-top: 10px;

  button {
    border-radius: 5px 0 0 5px;
  }

  .ant-input-affix-wrapper {
    border-radius: 0 5px 5px 0;
  }

  .ant-select {
    border-radius: 0 5px 5px 0;
  }
}

/* 当屏幕宽度大于等于 1200px 时应用的样式 */
@media screen and (min-width: 1200px) {

  /* 在这里添加针对 1200px 及以上屏幕宽度的样式 */
  .n-grid {
    display: grid;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0px, 1fr));
    gap: 20px 16px;
  }

  .last-gird-item {
    grid-column: 4 / span 1 !important;
    display: flex;
    justify-content: flex-end;
  }
}

/* 当屏幕宽度小于 1199px 时应用的样式 */
@media screen and (max-width: 1199px) {

  /* 在这里添加针对 799px 及以下屏幕宽度的样式 */
  .n-grid {
    display: grid;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: 20px 16px;

    .last-gird-item {
      grid-column: 2 / span 1;
    }
  }
}

.n-grid-item {
  grid-column: span 1 / span 1;
}

.hidden-grid-item {
  display: none;
}

.n-input-group {
  display: inline-flex;
  width: 100%;
  flex-wrap: nowrap;
  vertical-align: bottom;
}

.grid-btn {
  display: flex;
  justify-content: flex-end;
}

.table-content {
  margin-top: 30px;
}

.script .mask-opacity {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: all 0.2s;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.8);
  border: 1px dashed rgba(255, 101, 98, 0.5);
}

.script:hover .mask-opacity {
  opacity: 1;
}

button {
  border-radius: 5px;
}

:deep(.ss-select-selector) {
  border-radius: 0 5px 5px 0 !important;
}

.folder-btn {
  text-align: center;
  color: #336699;
  border-bottom: 1px solid #336699;
  border-radius: 0;
  display: inline-block;
}

.cursor-pointer {
  cursor: pointer;
}

.text-records {
  cursor: pointer;
}
</style>
